<template>
  <div class="login">
    <el-row :gutter="24">
      <el-col :span="24" >
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span style="font-size:20px"><strong>学生成绩在线发布系统</strong></span>
            </div>
          </template>
          <el-form
            :model="user"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item label="" prop="account">
              <el-input v-model="user.account" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input v-model="user.password" placeholder="密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="userLogin()">登录</el-button>
              <el-button @click="register()">注册</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { path } from "../config.json";
import crypto from "crypto";
import jwtDecode from "jwt-decode";
export default {
  name: "Login",
  data() {
    return {
      user: {
        account: "",
        password: "",
        level: "",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    userLogin() {
      axios({
        method: "post",
        url: path + "/user/judgeLogin",
        data: {
          account: this.user.account,
          password: crypto.createHash('md5').update(this.user.password).digest('hex'),
        },
      })
        .then((response) => {
          let token = response.data;
          sessionStorage.setItem("token",token);
          let decodedToken = jwtDecode(token);
          this.user.level = decodedToken.level;
          let level = this.user.level;
          if (level == "学生") {
            this.$router.push("StudentHome");
            sessionStorage.setItem("account", this.user.account);
            sessionStorage.setItem("level", this.user.level);
          } else if (level == "管理员") {
            //this.$router.push('studentHome')
            this.$router.push("adminHome");
            sessionStorage.setItem("account", this.user.account);
            sessionStorage.setItem("level", this.user.level);
          } else if (level == "查询失败") {
            ElMessage.error({
              message:"登陆失败，密码错误！",
              duration:1000
            });
          } else {
            ElMessage.error({
              message:"与服务器通信失败，请重试！",
              duration:1000
            });
          }
        })
        .catch(function (error) {
          ElMessage.error("与服务器通信失败，请重试！");
        });
    },
    register() {
      this.$router.push({
        name: "Register",
      });
    },
  },
};
</script>

<!-- scoped属性将该css样式设置为私有 -->
<style scoped>
.login {
  background-image: url("../assets/2020-10-10.jpg");
  background-size: cover;
  /*设置全局大小*/
  position: fixed;
  width: 100%;
  height: 100%;
}
.box-card{
  margin-top:10%;
  margin-left:37%;
  margin-right:37%;
  /* 设置透明度 */
  opacity: 0.97;
}
</style>